<template>
  <div class="">
    <h1>选中删除</h1>
    <ul>
      <li v-for="item in list" :key="item.id">
        <input
          type="checkbox"
          v-model="result"
          :value="item"
          @change="change"
        />
        <span>{{ item.title }}</span>
      </li>
    </ul>

    全选：<input type="checkbox" v-model="checked" @change="checkall" />

    <button @click="removeall">选中删除</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          id: 1,
          title: "任务一",
        },
        {
          id: 2,
          title: "任务2",
        },
        {
          id: 3,
          title: "任务3",
        },
        {
          id: 4,
          title: "任务4",
        },
      ],
      result: [],
      //保存选中的数据 保存的是item整条数据
      checked: false,
    };
  },
  mounted() {},
  methods: {
    removeall() {
      //把result从list中删除
      //把要留（不删 就是不在result）的筛选出来
      this.list = this.list.filter((item) => {
        return this.result.includes(item) == false;
      });
    },
    //点击选中删除

    checkall() {
      if (this.checked == true) {
        this.result = this.list;
      } else {
        this.result = [];
      }
    },
    //点击全选按钮的时候如果全选 就让result=所有的数据
    // 反选的时候 result=[]
    change() {
      if (this.result.length == this.list.length) {
        this.checked = true;
      } else {
        this.checked = false;
      }
    },
    //点击上面的复选框 如果全都选中了 就让全选按钮变成true 否则变成false
  },
  components: {},
};
</script>

<style lang="scss"></style>
